<!--
 * @Author: xuhanghai 2421880682@qq.com
 * @Date: 2024-12-10 10:49:11
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-03-24 14:41:10
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-select\index.vue
-->
<template>
  <div>
    <el-select ref="setectRef" v-model="internalValue" :placeholder="placeholder" :filterable="filterable"
      :remote="remote" :filter-method="filterMethod" :loading="loading" :style="{ width: `${width}px` }"
      @change="change" :multiple="multiple" :disabled="disabled" :clearable="clearable">
      <template #label="{ label, value }">
        <slot name="label" :key="label" :value="value">
        </slot>
      </template>

      <el-option v-for="item in showOptions" :key="item[keys]" :label="item[label]"
        :value="retuenItem ? item : item[keys]" />
      <template #loading>
        <slot name="loading"></slot>

      </template>
    </el-select>

  </div>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from "vue";
/**
 * @param width    宽度
 * @param modelValue    值
 * @param options    list列表
 * @param keys      指定返回的数据
 * @param label      指定显示的节点名称
 * @param placeholder  提示
 * @param disabled   是否禁用
 */
const setectRef = ref()
const props = defineProps({
  width: {
    type: Number,
    default: 240,
  },
  modelValue: {
    type: String,
    default: "",
  },
  keys: {
    type: String,
    default: "value",
  },
  label: {
    type: String,
    default: "label",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  retuenItem: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  options: {
    typr: Array,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  filterable: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  remote: {
    type: Boolean,
    default: false
  },
  remoteMethod: {
    type: Function,
    default: () => {

    }
  },
  filterMethod: {
    type: Function,
    default: () => {

    }
  },
  loading: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(["update:modelValue", "change"]);
let internalValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});


const showOptions = computed({
  get: () => {
    let list = props.options.map((it) => {
      it.value = it[props.keys];
      it.label = it[props.label];
      return it;
    });
    return list;

  },
  set: (newVal) => {
    console.log(newVal)
    // let list = newVal.map((it) => {
    //   it.value = it[props.keys];
    //   it.label = it[props.label];
    //   return it;
    // });
    return newVal
  }
});
// 当下拉框的值改变时触发，返回选中的item
const change = (val) => {
  let item = showOptions.value.filter(item => {
    return item.value == val
  })
  emits('change', item)
}
// 将下拉框关闭
const handleSelectChange = (val) => {
  setectRef.value.dropdownMenuVisible = val;
}

// const filterMethod = (val) => {
//   // if (val) {
//   let arr = props.options.filter(el => {
//     if (el[props.label].includes(val)) {
//       return el
//     }
//   })
//   showOptions.value = arr
//   // }
// }


defineExpose({ handleSelectChange }) 
</script>

<style lang="scss" scoped>
::v-deep .el-select__wrapper {
  min-height: 36px !important;
  padding: 1px 16px !important;
}
</style>
